<template>
  <div id="app">
    <pre v-if="warning" class="warning">WG博客提醒您：请勿发布违章内容，非则被过滤器进行过滤后果自负 <a class="close" href="javascript:;" @click="close"></a></pre>
    <vue-editor
      id="editor"
      useCustomImageHandler
      @image-added="handleImageAdded"
      v-model="content"
    >
    </vue-editor>


        <!-- <label>标题：</label>
        <input v-model="title" class="text" type="text">
        <label>简短描述：</label>
        <input v-model="message" class="text" type="text">
        <label>热搜/置顶：</label>
        <input class="checkbox" v-model="isHot" type="checkbox">
        <input class="checkbox" v-model="isTop" type="checkbox"> -->
       <!-- <label>封面上传：</label> -->
       <!-- <div class="uploadCover">
         <img id="Cover" width="100px" height="100px" src="@/assets/addCover.jpg" alt="">
          <input id="file" @change="chooseCover" type="file">
       </div>
       <input @click="submit" id="submit" type="button" value="发布" multiple> -->

      <addBlog
        @addBlog="replcae"
      ></addBlog>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor/dist/vue2-editor.core.js";
// 提交博客组件
import addBlog from "@/components/addBlog.vue";

export default {
  components: { VueEditor,addBlog },
  data(){
    return{
      content:"请输入内容",
      warning:true,
      title:"",
      message:"",
      isHot:false,
      isTop:false,
      imageSrc:"",

    }
  },
  methods:{
    // 关闭提示
    close(){
      this.warning=false
    },
    // 照片上传
    handleImageAdded(file, Editor, cursorLocation,resetUploade){
      // 图片格式匹配正则
      var imagesPatter = /^image.*/g
      // 如果图片上传不满足需求静止上传
      if(file.size>6009662){alert("图片最大限制5MB") ;return false}else if(!imagesPatter.test(file.type)){alert("仅支持jpg,png,fig格式"); return false}
        /* 当点击照片上传就会触碰该函数，
            1、file：文件
            2、Editor：编辑器实例
            3、cursorLocation：指针位置
            4、resetUploade: 重置上传者
        */
      // 设置请求头
        let config={
          headers:{"Content-Type":"multipart/form-data"}
        } 
      // 创建文件实例
        let formdata = new FormData();
        formdata.append('file',file,file.name);
        formdata.append('chunk', '0')
        console.log(formdata.get("file"))
      //1、 通过axios将图片上传到minio中
        this.$http.post("/uploadImage",formdata,config).then((ov)=>{
            //2、 通过编辑器实例 获取 编辑区域子类的实例对象 
              // 我们可以通过上传图片后返回图片链接
              // 然后生成<img>标签插入到该编辑区域
          var contentInput = Editor.container.childNodes[0].innerHTML+="<img src=http://localhost:8081/downLoadImage/"+ov.data+"><img>"
        })
    },
    // 当需要提交博客的时候需要对博客进行数据过滤，将h标签的内容设置成id
    Datafilter(){
      var cont = this.content
      // 标签选择正则表达式
      var HNPatter = /^<h\d>.*<\/h\d>$/g
      // 符合标签的地方 是个数组 因为可能有多个h标签
      var children = document.getElementsByClassName("ql-editor")[0].children
      for(var i = 0 ;i<children.length;i++){
        var http = children[i].outerHTML
        if(HNPatter.test(http)){
          children[i].setAttribute("id",children[i].innerText)
        }
      }
      // 替换content
      this.replaceContent(children)
    },
    replaceContent(object){
      // 定义一个临时变量
      var test = "";
        // 将编辑器的全部HTML内容进行复制
        for(var i = 0 ; i<object.length;i++){
          test+=object[i].outerHTML
        }
      // 将html进行覆盖content
      this.content=test
    },
    replcae(va){
        this.title=va.title,
        this.message=va.message,
        this.isHot=va.isHot,
        this.isTop=va.isTop,
        this.imageSrc=va.imageSrc
        this.submit()
    },
    submit(){
      this.Datafilter()
      const data = {
        title:this.title,
        summary:this.message,
        banner:this.imageSrc,
        content:this.content,
        isHot:this.isHot,
        isTop:this.isTop
      }
      this.$http.post("/submitBlog",this.qs.stringify(data)).then((ov)=>{
          if(ov.data.object){
            alert("发布成功")
            location.reload()
          }else{
            alert("上传失败")
          }
      
      })
    }
  }
};
</script>

<style  lang="less">
  
  @import "~vue2-editor/dist/vue2-editor.css";
  @import "~quill/dist/quill.core.css";
  @import "~quill/dist/quill.bubble.css";
  @import "~quill/dist/quill.snow.css";
  .warning{
 
    height: 30px;
    word-wrap: break-word;
    border-radius: 5px;
    padding: 5px;
    background: rgb(53, 53, 53);
    position: relative;
    font-size: 12px;
    line-height: 22px;
    .close{
      display: block;
      position: absolute;
      right: 10px;
      top: 5px;
      width: 15px;
      height: 15px;
      color: #000000;
      background: rgb(243, 29, 29);
      border-radius: 50%;
    }
  }
  #editor blockquote{
    border-left: 4px solid #04dd5e ;
    background-color: #ebeef5 ;
    padding: 10px 15px ;
    margin: 15px 0 ;
    color: #777 ;
  }
  #editor .ql-syntax{
    font-size: 15px ;
  }
  #editor p{
    font-size: 15px;
    color: #4d4d4d;
  }
  .submit{
    width: 100%;
    height: auto;
    // background: #353535;
    margin-top: 5px;
    label{
      display: block;
      font-size: 15px;
      padding: 10px;
    }
    .checkbox{
      width: 30px;
      height: 30px;
      
    }
    .text{
      width: 50%;
      height: 30px;
      border: none;
      border-radius: 3px;
      outline: none;
      background: rgb(55, 55, 99);
      padding-left: 10px;
    }
    .uploadCover{
      position: relative;
      input{
        position: absolute;
        left:0px;
        z-index: 11;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
      }

    }
      #submit{
        width: 100px;
        height: 30px;
        background: rgb(128, 128, 128);
      }
  }
</style>
